<template>
  <el-dialog :title="title" :visible.sync="visible" width="760px" append-to-body :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="webhook名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入webhook名称" maxlength="30" show-word-limit/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="type">
            <template #label>
              <el-tooltip content="默认提供HTTP和钉钉推送两种方式，可以参考官方文档进行自定义扩展" placement="top">
                <i class="el-icon-question" style="margin-left: 5px; color: #E6A23C; cursor: pointer;"></i>
              </el-tooltip>
              <span>请求实现</span>
            </template>
            <el-select v-model="form.type" placeholder="请选择请求实现">
              <el-option v-for="req in outerRequestOptions" :key="req.value" :label="req.label"
                         :value="req.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="请求地址" prop="webhook">
            <el-input v-model="form.webhook" placeholder="请求地址为第三方平台开放的推送接口" class="webhook" maxlength="500" show-word-limit>
              <el-button slot="append" icon="el-icon-document-copy" v-clipboard="form.webhook"
                         v-clipboard:success="copySuccessWebHookHandle"
                         v-clipboard:error="copyErrorWebHookHandle"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="密钥" prop="secret">
            <el-input v-model="form.secret" placeholder="第三方平台开放的推送接口的密钥" maxlength="500" show-word-limit/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="扩展参数" prop="extendParams">
            <el-input v-model="form.extendParams" type="textarea" rows="12" placeholder="自定义扩展参数,可在自定义webhook中使用" maxlength="500" show-word-limit/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    outerRequesterList,
    updateWebhook,
    addWebhook
  } from "@/api/hawkeye/webhook";

  export default {
    name: "WebhookModalForm",
    props: {},
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        visible: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [
            {required: true, message: "名称不能为空", trigger: "blur"}
          ],
          webhook: [
            {required: true, message: "请求地址不能为空", trigger: "blur"}
          ],
          type: [
            {required: true, message: "请求实现不能为空", trigger: "blur"}
          ]
        },
        outerRequestOptions: [],
      };
    },
    created() {
      if (this.checkPermi(['hawk-eye:webhook:add','hawk-eye:webhook:edit'])) {
        this.getOuterRequesters();
      }
    },
    methods: {
      open(row) {
        this.reset();
        if (row && row.id){
          this.form = row;
          this.title = "编辑";
        }else{
          this.title = "添加";
        }
        this.visible = true;
      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          serviceId: null,
          webhookId: null
        };
        this.resetForm("form");
      },
      // 复制成功回调函数
      copySuccessWebHookHandle (value) {
        this.$modal.msgSuccess("内容已复制到剪切板,可进行粘贴");
      },
      // 复制失败回调函数
      copyErrorWebHookHandle (value) {
        this.$modal.msgError("复制失败,请确认浏览器支持复制功能");
      },
      getOuterRequesters() {
        outerRequesterList().then(res => {
          Array.from(res.data).forEach(item => {
            this.outerRequestOptions.push({"label": item, "value": item})
          })
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateWebhook(this.form).then(res => {
                this.$modal.msgSuccess("修改成功");
                this.visible = false;
                this.$emit('submitted', res);
              })
            } else {
              addWebhook(this.form).then(res => {
                this.$modal.msgSuccess("新增成功");
                this.visible = false;
                this.$emit('submitted', res);
              });
            }
          }
        });
      },
    }
  }
</script>
